<template>
	<view>
		<view class="logo_img">
				<image src="../../../static/icon/default/ic_launcher.png" mode=""></image>
			  </view>
			  <view class="input_content">
			    <view class="login_phone">
			     <m-input class="m-input" type="text" clearable focus v-model="account" placeholder="请输入手机号"></m-input>
			    </view>
			    <view class="login_phone">
			     <m-input class="m-input" type="text"  v-model="captcha" placeholder="请输入验证码"></m-input>
			    </view>
				<view class="login_phone">
				 <m-input class="m-input" type="password" v-model="password" placeholder="请输入密码"></m-input>
				</view>
				<view class="login_phone">
				 <m-input class="m-input" type="password" v-model="passwordAgain" placeholder="再次输入密码"></m-input>
				</view>
			  </view>
			
			  <view @click="getCodeFun" :disabled="disabled" class="id_code">
			    <template v-if="sending">
			      <text>获取验证码</text>
			    </template>
			    <template v-else>
					<text>
						   {{second}}秒后重发
					</text>
			    </template>
			  </view>
			
			  <view class="register_button">
			    <button @click="register">注&nbsp;&nbsp;册</button>
			  </view>
			  <!--    <view class="agree">-->
			  <!--        <view class="input"><input name="agree" type="radio"/></view>-->
			  <!--        <p>我已阅读并同意<a><span>《用户服务协议及隐私协议》</span></a></p>-->
			  <!--    </view>-->
		</view>
	</view>
</template>

<script>
	
	import {
		GET_CAPTCHA,
		REGISTER,
	} from '@/store/mutation-types.js'
	
	export default {
		data() {
			return {
				account: '',
				captcha: '',
				verificationCode: '',
				password: '',
				passwordAgain: '',
				sending: true,      //是否发送验证码
				disabled: false,   //是否禁发验证码
				second: 60,        //倒计时间
				inviteId: 0
			}
		},
		onNavigationBarButtonTap() {  
		        uni.navigateBack()
		   }  ,
		mounted() {
			let inviteId = CommonUtils.getQueryVariableFromUrl("inviteId");
			// console.log(inviteId)
			if (typeof (inviteId) != 'undefined' && inviteId != false && inviteId != null) {
			    this.inviteId = inviteId;
			}
		},
		
		methods: {
			getCode() {
				const app = this;
				if (this.account == '') {
					app.$toast("手机号不能为空！");
					return;
				}
				this.sending = false;
				this.disabled = true;
				const data = {
					"phoneNumber": this.account
				}
				const success = function (result) {
					if (result.error == "0") {
						app.$toast("已发送验证码！");
						app.verificationCode = result.data.code;
						app.timeDown();
					} else {
						app.$toast(result.error);
					}
				};
				console.log(data)
				this.$store.dispatch(`user/${GET_CAPTCHA}`,{
					data,
					onSuccess:success
				})
			},
			register() {
				var app = this;
				if (this.password != this.passwordAgain) {
					app.$toast("两次密码填写不一致");
					return;
				}
				let data = {
					"phoneNumber": this.account,
					"inviteId": this.inviteId,
					"verificationCode": this.verificationCode,
					"password": this.password
				};
				let success = function (result) {
					if (result.error == "0") {
						app.$toast("注册成功！请于app端登录");
						// window.location.href="./download.html";
						uni.redirectTo({
							url:"../login_byPassword/login_byPassword"
						})
					} else {
						app.$toast(result.error);
					}
				};
				console.log(data)
				this.$store.dispatch(`user/${REGISTER}`,{
					data,
					onSuccess:success
				})
			},
			getCodeFun() {
				//his.sending原为true,请求成功，!this.sending == true，主要是防止有人把disabled属性去掉，多次点击；
				if (!this.sending)
					return;
				this.getCode();
			},
			timeDown() {
				let result = setInterval(() => {
					--this.second;
					if (this.second < 0) {
						clearInterval(result);
						this.sending = true;
						this.disabled = false;
						this.second = 60;
					}
				}, 1000);
				
			}
		},
	}
</script>


<style>

.mint-header {
    padding: 10px 0;
    height: 3.5rem;
}

.mint-header-title {
    font-weight: bolder;
    font-size: 1.2rem;
    /*font-family: 微软雅黑;*/
}

.mint-header-button.is-left {
    text-align: center;
}

.logo_img {
    text-align: center;
    padding: 75rpx 0;
}

.logo_img image {
    height: 125rpx;
	width: 125rpx;
}

.input_content {
    margin: 0.5rem auto 0;
    background: #f4f4f4;
    width: 80%;
    border-radius: 1rem;
}

.input_content .login_phone {
    border-bottom: 1px solid #aaaaaa;
    height:120rpx;
    line-height: 91.34rpx;
    background: #fff;
}

.input_content .login_phone img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_phone input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 18px;
    height: 120rpx;
    border: none;
    color: #6a6f77;
    width: 100%;
}

.input_content .login_identify {
    /*border-bottom: 1px solid #aaaaaa;*/
    height: 3.5rem;
    border-radius: 0 0 1rem 1rem;
    line-height: 3.5rem;
}

.input_content .login_identify img {
    height: 2.2rem;
    width: 2rem;
    padding: 0.65rem 1rem;
    float: left;
}

.input_content .login_identify input {
    -web-kit-appearance: none;
    -moz-appearance: none;
    font-size: 1.1rem;
    height: 2em;
    border: none;
    color: #6a6f77;
    background: #f4f4f4;
}

.get_identify button {
    float: right;
    margin-right: 3rem;
    color: #ff5a48;
    font-size: 0.9rem;
    background-color: Transparent;
    border: none;
    outline: none;
}

.register_button {
    margin-top: 3rem;
    text-align: center;
}

.register_button button {
    background: #ff5a48;
    width: 520rpx;
    height: 100rpx;
    text-align: center;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 5px;
}

.agree {
    padding: 2rem 0;
    margin-left: 17%;
    display: flex;
}

.agree .input {
    flex: 0.01;
}

.agree p {
    margin-top: 0.1rem;
    font-size: 0.8em;
    color: #6a6f77;
    flex: 1;
}

.agree p span {
    color: #ff9800;
}

.line {
    /*padding: 0rem auto;*/
    display: flex;
    text-align: center;
    /*position: fixed;*/
    /*bottom: 3rem;*/
}

.line .one_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-left: 1rem;
    flex: 0.8;
}

.line .font {
    flex: 1;
}

.line .two_hr {
    /*height: 0.1rem;*/
    margin-top: 1rem;
    margin-right: 1rem;
    flex: 0.8;
}

.id_code{
    color: #ff5a48;
    float: right;
    margin-right: 10%;
    padding: .5rem;
    border: none;
	font-size: 18px;
}

</style>
